<template>
  <a-modal
    title="考勤详情"
    :width="1000"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading" class="spin-div">
      <full-calendar v-if="visible" :events="monthData" lang="zh" @dayClick="dayClick" @changeMonth="changeMonth"></full-calendar>
    </a-spin>
  </a-modal>
</template>

<script>
import { getStaffAttendanceRecordByUserId } from '@/api/modular/garden/kaoqin';
import moment from 'moment';
  var demoEvents = [
      {
        title : 'Sunny Out of Office',
        start : '2016-08-25',
        end : '2017-07-27'
      }
  ]
  export default {
    zh : {
      weekNames : ['周一','周二','周三','周四','周五','周六','周日'],
      monthNames : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','11月','12月'],
      titleFormat : 'yyyy年MM月'
    },
    components: {
      'full-calendar': require('vue-fullcalendar') 
    },
    
    data () {
      return {
        fcEvents : demoEvents,
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 18 }
        },
        visible: false,
        confirmLoading: false,
        form: this.$form.createForm(this),
        monthData: [
        ],
        recordInfo: {},
      }
    },
    mounted(){
      // this.calendarApi = this.$refs.fullCalendar.getApi();
    },
    methods: {
      moment,
      // 初始化方法
      add (record) {
            this.monthData = [];
        this.visible = true;
        this.recordInfo = record;
        getStaffAttendanceRecordByUserId({
          date: this.moment(new Date()).format('YYYY-MM-DD'),
          userId: record.userId
        }).then(res => {
          if(res.success){
            this.monthData = res.data;
          }
        })
      },
      changeMonth (start, end, current) {
        console.log('changeMonth', start,'----', end,'=-----', current)
            this.monthData = [];
        getStaffAttendanceRecordByUserId({
          date: current,
          userId: this.recordInfo.userId
        }).then(res => {
          if(res.success){
            this.monthData = res.data;
          }
        })
      },
      eventClick (event, jsEvent, pos) {
        console.log('eventClick', event, jsEvent, pos)
      },
      dayClick (day, jsEvent) {
        console.log('dayClick', day, jsEvent)
      },
      moreClick (day, events, jsEvent) {
        console.log('moreCLick', day, events, jsEvent)
      },
      getMonthData(value) {
        if (value.month() === 8) {
          return 1394;
        }
      },
      handleSubmit () {
        console.log(this.moment(new Date(), 'YYYY-MM-DD'))
                this.$emit('ok')
      },
      handleCancel () {
        this.form.resetFields()
        this.visible = false;
            this.monthData = [];
      }
    }
  }
</script>
<style>
  
  .spin-div .full-calendar-body .dates .dates-events .events-week .events-day{
    min-height: 100px;
  }
</style>
<style scoped>
.events {
  list-style: none;
  margin: 0;
  padding: 0;
}
.events .ant-badge-status {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis;
  font-size: 12px;
}
.notes-month {
  text-align: center;
  font-size: 28px;
}
.notes-month section {
  font-size: 28px;
}
</style>
